<template>
	<view class="wh f16 p-0-10">
		<view class="p20 c0 tac bs6" :style="{background:subColor}">
			<view class="f14 mb10">余额(元)</view>
			<view class="f28 wei6 ">{{form.total_amount || '0.00'}}</view>
			<view class="mt15">
				<text class="button_common mr10"
					:style="{background: subColor,border: '1px solid'+subColor,color:'#000'}" v-if="wiForm.rule==1"
					@click="ljtx">立即提现</text>
				<text class="button_common" :style="{background: subColor,border: '1px solid'+subColor,color:'#000'}"
					@click="txmx">查看明细</text>
			</view>
		</view>
		<view class="mt10 bf pb10 bs6">
			<u-grid :border="false" @click="click">
				<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="32" color="#FD8906">
					</u-icon>
					<text class="grid-text f14">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
		<view class="mt10 bf p10">
			<view class="f14 wei6">流水记录</view>
			<!-- <u-tabs :list="list" :current="current" :scrollable="false" lineWidth="40px" :lineColor="subColor"
				@change="tabChange"></u-tabs> -->
			<view class="uni-container mt10">
				<uni-table ref="table" border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="center">金额(元)</uni-th>
						<uni-th align="center">变更时间</uni-th>
						<uni-th align="center">账户余额(元)</uni-th>
						<uni-th align="center">备注</uni-th>
					</uni-tr>
					<uni-tr v-for="(row, i) in logList" :key="i">
						<uni-td><text v-if="row.type==1">+</text><text v-else>-</text>{{ row.value }}</uni-td>
						<uni-td>
							<view class="name">{{ cd(row.created_at) }}</view>
						</uni-td>
						<uni-td align="center">{{ row.atLast }}</uni-td>
						<uni-td align="center">{{ row.notes }}</uni-td>
					</uni-tr>
				</uni-table>
				<view class="uni-pagination-box"><uni-pagination show-icon :page-size="queryForm.pageSize"
						:current="queryForm.pageNo" :total="total" @change="change" /></view>
			</view>
			<view class="np f-c-c" v-if="logList.length==0">
				<view class="iconfont icon-queshengtu cb" style="font-size: 90rpx;"></view>
				<view class="f12 cb mt20">暂无记录</view>
			</view>
		</view>
		<withdrawal ref="withdrawal" @save="init"></withdrawal>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import {
		changeDate
	} from "@/common/handutil.js";
	import withdrawal from "./components/withdrawal.vue"
	export default {
		components: {
			withdrawal,
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				current: 0,
				list: [{
					name: '待结算',
				}, {
					name: '已结算',
				}, ],
				baseList: [{
						name: 'account-fill',
						title: '账户设置',
					},
					{
						name: 'red-packet-fill',
						title: '提现账户'
					},
					{
						name: 'file-text-fill',
						title: '提现明细'
					},
				],
				form: {},
				logList: [],
				queryForm: {
					storeId: "",
					pageNo: 1,
					pageSize: 10,
				},
				total: 0,
				wiForm: {},
			}
		},
		onLoad() {
			this.fetchData()
			this.fetchLog()
			this.getSetConfig()
		},
		computed: {
			...mapState({
				storeId: state => state.storeId,
			}),
		},
		methods: {
			async fetchData() {
				const {
					data: {
						list
					}
				} = await this.beg.request({
					url: this.api.storeAccount,
					data: {
						storeId: this.storeId
					},
				})
				this.form = list[0];
			},
			async fetchLog() {
				this.queryForm.storeId = this.storeId
				const {
					data: {
						list,
						pageNo,
						pageSize,
						total
					}
				} = await this.beg.request({
					url: this.api.accountLog,
					data: this.queryForm,
				})
				this.logList = list;
				this.total = total;
				this.queryForm.pageNo = pageNo;
				this.queryForm.pageSize = pageSize;
			},
			async getSetConfig() {
				let {
					data
				} = await this.beg.request({
					url: this.api.config,
					data: {
						ident: 'withdrawalSet'
					}
				})
				this.wiForm = data
			},
			init() {
				this.fetchData()
				this.fetchLog()
			},
			change(e) {
				this.queryForm.pageNo = e.current;
				this.fetchLog()
			},
			cd(d) {
				return changeDate(d)
			},
			click(name) {
				let url = name == 0 ? `/pages/mine/storeAccount/accountSetting/index?form=${JSON.stringify(this.form)}` :
					name == 1 ?
					`/pages/mine/storeAccount/withdrawal/index?form=${JSON.stringify(this.form)}` :
					'/pages/mine/storeAccount/withdrawalDetails/index'
				uni.navigateTo({
					url,
				})
			},
			txmx() {
				uni.navigateTo({
					url: '/pages/mine/storeAccount/withdrawalDetails/index'
				})
			},
			tabChange(item) {
				this.current = item.index
			},
			ljtx() {
				this.$refs['withdrawal'].open(this.form, this.wiForm)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		.button_common {
			color: #fff;
		}
	}

	/deep/.current-index-text {
		color: #FD8906 !important;
	}
</style>